<!--推送信息的展示栏-->
<script setup lang="ts">
import {onMounted, ref, watch} from 'vue'
import {notification} from "ant-design-vue";
import {useClickAway} from "@/utils";
import MessageCard from "@/components/widgets/messageList/modules/messageCard.vue";
import useMessageStore from '@/store/message'
const messageStore = useMessageStore()
const props = withDefaults(
    defineProps<{
      btnDom: Document | null
    }>(),
    {
      btnDom: null
    }
);

//messageList的隐藏和展示
//隐藏或显示状态
const show = ref<boolean>(false)
// watch(() => show.value,(newVal) => {
//   console.log(newVal)
// })
//样式
const positionRight = ref<number>(-350)
//隐藏
const hideMessageList = () => {
  positionRight.value = -350
  show.value = false
}
//显示
const showMessageList = () => {
  show.value = true
  //消除掉显示在表层的提醒
  notification.destroy()
  positionRight.value = 0
}
//暴露出去此方法以便外面的按钮进行调用
const handlerMessageList = () => {
  if (show.value) {
    hideMessageList()
  } else {
    showMessageList()
  }
}
defineExpose({handlerMessageList})

//点击其他地方隐藏（ClickAway）
const messageListRef = ref<Document | null>(null)
//绑定ClickAway方法
const clickAwayHidden = () => {
  if (messageListRef.value && props.btnDom) {
    useClickAway(() => {
      if (show.value) {
        hideMessageList()
      }
    }, [messageListRef.value, props.btnDom])
  }
}
//在btnDom有值的时候绑定上
watch(() => props.btnDom, (newVal: Document) => {
  if (newVal) {
    clickAwayHidden()
  }
})
</script>
<template>
  <div class="message-list" :style="{right:positionRight+'px'}" ref="messageListRef">
    <MessageCard v-for="message in messageStore.messageList" :key="message.messageKey" :message="message"></MessageCard>
  </div>
</template>
<style lang="less" scoped>
.message-list {
  width: 350px;
  height: calc(100vh - 30px);
  position: fixed;
  z-index: 1020;
  top: 30px;
  transition-property: left;
  transition: 0.3s;
  overflow: auto;
}

.message-list::-webkit-scrollbar {
  display: none;
}
</style>
